<template>
  <v-card title="阶梯瀑布图">
    <vcu-chart-bar :data="chartData" :settings="settings" />
  </v-card>
</template>

<script>
export default {
  name: 'step-waterfall',
  data() {
    return {
      chartData: {
        dimensions: {
          name: '日期',
          data: [
            '11月1日',
            '11月2日',
            '11月3日',
            '11月4日',
            '11月5日',
            '11月6日',
            '11月7日',
            '11月8日',
            '11月9日',
            '11月10日',
            '11月11日',
          ],
        },
        measures: [
          {
            name: 'secondaryMeasure',
            data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292],
          },
          {
            name: '收入',
            data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
          },
          {
            name: '支出',
            data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
          },
        ],
      },
      settings: {
        stack: {
          总量: ['secondaryMeasure', '收入', '支出'],
        },
        label: [
          {
            name: '收入',
            show: true,
            position: 'top',
          },
          {
            name: '支出',
            show: true,
            position: 'bottom',
          },
        ],
        waterfall: true,
        tooltipOptions: {
          formatter: function (params) {
            let tar
            if (params[1].value[2] !== '-') {
              tar = params[1]
              return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value[2]
            } else {
              tar = params[2]
              return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value[3]
            }
          },
        },
      },
    }
  },
  methods: {},
  created() {},
}
</script>
<style lang="less" scoped>
</style>